<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/orderset.css">
        <!-- 引入组件库 -->
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
    </head>
    <body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>预约管理<small>预约设置</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>预约管理</el-breadcrumb-item>
                <el-breadcrumb-item>预约设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <div class="box ordersetting">
                    <el-card class="box-card">
                        <div class="boxMain">
                            <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
                            <el-upload action="/ordersetting/upload.do"
                                       name="excelFile"
                                       :show-file-list="false"
                                       :on-success="handleSuccess"
                                       :before-upload="beforeUpload">
                                <el-button type="primary">上传文件</el-button>
                            </el-upload>
                        </div>
                        <div>
                            操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                        </div>
                    </el-card>
                    <div class="calendar">
                        <!-- 年份 月份 -->
                        <div class="month">
                            <div class="currentdate">
                                <span class="choose-year">{{ currentYear }}年</span>
                                <span class="choose-month">{{ currentMonth }}月</span>
                            </div>
                            <div class="choose">
<!--                                调试按钮-->
<!--                                <el-button type="danger" @click="get" plain>危险按钮</el-button>-->
                                <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                                <!--上一页-->
                                <span @click="pickPre(currentYear,currentMonth)">❮</span>
                                <!--下一页-->
                                <span @click="pickNext(currentYear,currentMonth)">❯</span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!-- 星期 -->
                        <div class="caldate">
                            <ul class="weekdays">
                                <li>周一</li>
                                <li>周二</li>
                                <li>周三</li>
                                <li>周四</li>
                                <li>周五</li>
                                <li>周六</li>
                                <li>周日</li>
                            </ul>
                            <!-- 日期 -->
                            <ul class="days">
                                <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                                <li v-for="dayobject in days">
                                    <template>
                                        <!-- 非当前月份 -->
                                        <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                            {{ dayobject.day.getDate() }}
                                        </div>
                                        <!-- 当前月 -->
                                        <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                            <span class="datenumber">{{ dayobject.day.getDate()}}</span>
                                            
											<template>
                                                <template v-for="obj in leftobj">
<!--                                                    遍历leftobj数组-->
                                                    <template v-if="obj.date == dayobject.day.getDate()" >
<!--                                                        todo 把可预约人数 添加到对应的dayobject里面-->
<!--                                                        如果两个的日期相等-->
                                                        <template v-if="obj.number > obj.reservations">
<!--                                                            可预约人数大于已预约人数显示正常的-->
                                                            <div class="usual">
                                                                <p>可预约{{obj.number}}人</p>
                                                                <p>已预约{{obj.reservations}}人</p>
                                                            </div>
                                                        </template>
                                                        <template v-else>
<!--                                                            否则就是预约满了-->
                                                            <div class="fulled">
                                                                <p>可预约{{obj.number}}人</p>
                                                                <p>已预约{{obj.reservations}}人</p>
                                                                <p>已满</p>
                                                            </div>
                                                        </template>
                                                    </template>
                                                </template>
                                                <!--参数是对应的具体日期-->
                                                <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
                                            </template>
											
                                        </div>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        设置可预约人数-->
        <el-dialog
                title="设置可预约人数"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">

            <div class="block">
<!--                预约人数选择器-->
                <el-slider
                        max="500"
                        step="10"
                        v-model="currentNumber"
                        show-input>
                </el-slider>
            </div>
            <div slot="footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleEdit">确 定</el-button>
            </div>


  </span>
        </el-dialog>
    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                //修改预约人数的dialog
                dialogVisible:false,
                //当前日期
                today:new Date(),
                // 选择日期的当前可预约人数
                currentNumber:0,
                // 选择日期的当前已预约人数
                currentReservations:0,
                //第几天
                // currentDateDay:1,
                fullDate:null,
                //周几
                currentDay: 1,
                //当前显示月
                currentMonth: 1,
                //实际是几月
                LocalMonth: 1,
                //当前年
                currentYear: 1970,
                //当前周
                currentWeek: 1,
                days: [],
                leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
        // { date: 1, number: 120, reservations: 1 },
        // { date: 3, number: 120, reservations: 1 },
        // { date: 4, number: 120, reservations: 120 },
        // { date: 6, number: 120, reservations: 1 },
        // { date: 8, number: 120, reservations: 1 }
            },
            created: function () {//在vue初始化时调用
                this.initData(null);

            },
            methods: {
                // 重置数据
                reset(){
                    this.currentNumber=0;
                    this.currentReservations=0;
                },
                //开发用按钮,控制台显示数据用的
                get(){
                    let data={
                        currentDay: this.currentDay,
                        currentMonth: this.currentMonth,
                        LocalMonth: this.LocalMonth,
                        currentYear: this.currentYear,
                        currentWeek: this.currentWeek,
                        days: this.days,
                        leftobj: this.leftobj
                    }
                    console.log(data)
                },
                // // 获取预约列表数据
                // findSettingData(){
                //     this.reset()
                //     //清除预约信息
                //     this.leftobj=[]
                //     let year = this.currentYear;
                //     let month = this.currentMonth
                //     //打印当前年月
                //     console.log(year,month)
                //
                // },
                handleCancel(){
                    this.$message("取消了操作...")
                    this.dialogVisible=false
                },
                handleEdit(){
                    //构造日期时月份需要减一
                    // let date = new Date(this.currentYear,this.currentMonth-1)

                    let parm={
                        orderDate:this.formatDate(this.fullDate.getFullYear(),this.fullDate.getMonth()+1,this.fullDate.getDate()), //日期
                        number:this.currentNumber,
                        reservations:this.currentReservations
                    }
                    // if (true) return;
                    axios.post("/ordersetting/edit.do",parm).then((res) => {
                        if (res.data.flag) {
                            //请求到了数据
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            })
                            // 更改成功后重新查询这一页的数据
                            this.initData(this.formatDate(this.fullDate.getFullYear(), this.fullDate.getMonth() + 1, 1));
                            // this.findSettingData()
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                    //关闭弹窗,清除数据
                    this.dialogVisible=false
                    this.reset()
                },
                handleClose(done) {
                    this.reset()
                    this.$message("取消了操作...")
                    done();
                },
				//点击设置按钮时(传入具体的日期)----可预约人数设置
                handleOrderSet(fullDate){
                    this.reset()
                    // // 具体的时间对象--Tue Mar 30 2021 08:00:00 GMT+0800 (中国标准时间)
                    // let fullDate = dayobject.day
                    // 一个月中的哪一天---30

                    let Date = fullDate.getDate()
                    // this.currentDateDay = Date
                    this.fullDate = fullDate
                    //getDay()返回的是周几
                    //遍历,获取原始的预约人数
                    this.leftobj.forEach(item=>{
                        // alert(item)
                        // alert(item.date)
                        if (item.date==Date){
                            // 把原始的可预约人数传递给currentNumber
                            this.currentNumber = item.number
                            this.currentReservations=item.reservations
                            return
                        }
                    })
                    // 显示预约人数编辑框
                    this.dialogVisible=true


                },
				//上传之前进行文件格式校验
                beforeUpload(file){
                    const isXLS = file.type === 'application/vnd.ms-excel';
                    if(isXLS){
                        return true;
                    }
                    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (isXLSX) {
                        return true;
                    }
                    this.$message.error('上传文件只能是xls或者xlsx格式!');
                    return false;
                },
				//下载模板文件 TODO 改成后端的处理下载(两个头一个流)
                downloadTemplate(){
                    // window.location.href="../../template/ordersetting_template.xlsx";
                    axios.post("/ordersetting/download", {responseType: 'blob'}).then((res) => {
                        if (res.data.flag) {
                            //请求到了数据
                            this.$message.error("成功")
                        } else {
                            this.$message.error("失败")
                        }

                    })
                },
				//上传成功提示
                handleSuccess(response, file) {
                    if(response.flag){
                        console.log(response)
                        this.$message({
                            duration:0,
                            showClose:true,
                            dangerouslyUseHTMLString:true,
                            message: response.data,
                            type: 'success'
                        });
                    }else{
                        this.$message.error(response.message);
                    }
                    console.log(response, file, fileList);
                },
                //初始化当前页要展示的日期
				initData: function (cur) {
                    var date;
                    var index = 0;   //控制显示预定的天数
                    if (cur) {
                        date = new Date(cur);
                    } else {
                        var now = new Date();
                        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                        d.setDate(35);
                        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    }
                    this.currentDay = date.getDate();
                    this.currentYear = date.getFullYear();
                    this.currentMonth = date.getMonth() + 1;
                    this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                    var today = new Date();
                    this.LocalMonth = today.getMonth() + 1;
                    if (this.currentWeek == 0) {
                        this.currentWeek = 7;
                    }
                    var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                    this.days.length = 0;
                    // 今天是周日，放在第一行第7个位置，前面6个
                    //初始化本周
                    for (var i = this.currentWeek - 1; i >= 0; i--) {
                        var d = new Date(str);
                        d.setDate(d.getDate() - i);
                        var dayobject = {};
                        dayobject.day = d;
                        var now = new Date();
                        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                            dayobject.index = index++;//从今天开始显示供预定的数量
                        }
                        else if (index != 0 && index < 3)
                            dayobject.index = index++;//从今天开始3天内显示供预定的数量
                        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                    }
                    //其他周
                    for (var i = 1; i <= 35 - this.currentWeek; i++) {
                        var d = new Date(str);
                        d.setDate(d.getDate() + i);
                        var dayobject = {};//dayobject   {day:date,index:2}
                        dayobject.day = d;
                        var now = new Date();
                        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                            dayobject.index = index++;
                        }
                        else if (index != 0 && index < 3)
                            dayobject.index = index++;
                        this.days.push(dayobject);
                    }
                    // 获取分页数据
                    //向后台发送请求,获取对应月份得数据
                    axios.post("/ordersetting/findData.do?date=" + this.currentYear + "-" + this.currentMonth).then((res) => {
                        if (res.data.flag){
                            console.log(res.data.message)
                            this.leftobj=res.data.data
                        }else {
                            this.message.error(data.message)
                        }
                        //请求到了数据进行装载

                    })
                },
				//切换到当前月份
                goCurrentMonth: function (year, month) {
                    var d = new Date();
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
				//向前一个月
                pickPre: function (year, month) {
                    // setDate(0); 上月最后一天
                    // setDate(-1); 上月倒数第二天
                    // setDate(dx) 参数dx为 上月最后一天的前后dx天
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(0);
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

                },
				//向后一个月
                pickNext: function (year, month) {
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(42);////获取指定天之后的日期
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

                },
                // 返回 类似 2016-01-02 格式的字符串
                formatDate: function (year, month, day) {
                    var y = year;
                    var m = month;
                    if (m < 10) m = "0" + m;
                    var d = day;
                    if (d < 10) d = "0" + d;
                    return y + "-" + m + "-" + d
                }
            }
        })
    </script>
</html>